<template>
  <div class="wrapper">
    <router-link :to="'/auth/add'">
      <el-button type="success" style="margin-bottom:20px">添加权限</el-button>
    </router-link>
  	<el-table :data="list" :stripe="true" :border="true" :highlight-current-row="true">
  	  <el-table-column label="ID" prop="id"></el-table-column>
  	  <el-table-column label="权限名称" prop="name"></el-table-column>
  	  <el-table-column label="状态" prop="status_text"></el-table-column>
  	  <el-table-column label="创建时间" prop="create_time"></el-table-column>
  		<el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/auth/edit/' + scope.row.id">
            <el-button size="mini">编辑</el-button>
          </router-link>
          <el-button v-if="scope.row.status === 1" size="mini" @click="stopAuth(scope.row)">禁用</el-button>
          <el-button v-else size="mini" @click="startAuth(scope.row)">启用</el-button>
          <router-link :to="'/auth/noPageRoleList/' + scope.row.id">
            <el-button v-if="scope.row.status === 1" size="mini" type="success">赋予角色权限</el-button>
          </router-link>
        </template>
      </el-table-column>
  	</el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {}
    },
    created () {
      this.getList()
    },
    computed: {
      ...mapState({
        list: state => state.auth.list,
        pageData: state => state.auth.pageData
      })
    },
    methods: {
      // 获取权限列表
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          listRows: this.pageData.per_page
        }
        await this.$store.dispatch('auth/getList', payload)
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      // 启用某个权限
      async startAuth (row) {
        let payload = {
          id: row.id
        }
        await this.$store.dispatch('auth/startAuth', payload).then(res => {
          this.getList()
        })
      },
      // 禁用某个权限
      async stopAuth (row) {
        let payload = {
          id: row.id
        }
        await this.$store.dispatch('auth/stopAuth', payload).then(res => {
          this.getList()
        })
      }
    }
  }
  </script>
<style scoped lang="scss">
@import "../../../assets/scss/base.scss";
.wrapper {
  .el-table {
    table {
      tr {
        td {
          ul {
            li {
              label {
                display: inline-block;
                vertical-align: top;
                width: $label-w;
                height: $label-h;
                line-height: $label-h;
                text-align: right;
                padding-right: 10px;
              }
              span {
                display: inline-block;
                vertical-align: top;
                width: $label-w * 2;
                height: $label-h;
                line-height: $label-h;
              }
            }
          }
        }
      }
    }
  }
}
</style>

